<template>
  <div class="imag">
    <div class="imag1">
      <span @click="hiddenClick(index)" v-for="(item,index) in hiddleArr" :key="index" :class="{active:currentIndex == index}">{{item}}</span>
    </div>
    <!-- 正在抢购 -->
    <div class="goods" v-for="(item, index) in goodsArr" :key="index">
      <img :src="item.pic" alt="" />
      <div class="goodsInfor">
        <h3>{{ item.title }}</h3>
        <!-- 评分 -->
        <p class="score">
          <span>{{ item.score }}</span>
        </p>
        <!-- 起送 -->
        <p class="gap">
          <span>￥{{ item.price }}</span
          >&nbsp;&nbsp;&nbsp;
          <span>{{ item.saled }}</span>
          <span @click="handleClick(item)">{{ item.gap }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
let img =
  "https://img0.baidu.com/it/u=2557415556,469692988&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500";
export default {
  // 定义数据
  data() {
    return {
      // 保存当前被点击的一项
      currentIndex: 0,
      hiddleArr:["正在抢购","上新预告"],
      goodsArr: [
        {
          pic: img,
          title: "汉堡王 | 北美新天地餐厅",
          score: "抱抱团价",
          saled: "5折",
          price: "20",
          gap: "马上抢",
        },
        {
          pic: img,
          title: "华莱士 | 聚划算单人套餐",
          score: "抱抱团价",
          saled: "3,9折",
          price: "10",
          gap: "马上抢",
        },
        {
          pic: img,
          title: "白老大小米果仁酥",
          score: "抱抱团价",
          saled: "6折",
          price: "30",
          gap: "马上抢",
        },
      ],
    };
  },
  methods: {
    handleClick(item) {
      item.gap = "已抢";
    },
    hiddenClick(index){
      // 必须加this
      this.currentIndex = index;
      // let flag = false;
      // if(item == "正在抢购"){
      //   flag = true;
      // }
      // return flag;
    }
  },
};
</script>

<style>
.imag{
  margin-bottom: 60px;
}
.imag1 {
  background-color: coral;
  width: 100%;
  height: 200px;
  position: relative;
  color: #fff;
  font-size: 20px;
}
.imag1>.active{
  border-bottom: 1px solid #fff;
}
.imag1 > span:nth-child(1) {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.imag1 > span:nth-child(2) {
  position: absolute;
  left: 120px;
  bottom: 20px;
}

.goods {
  display: flex;
}
.goods > img {
  width: 40%;
}
.goods > .goodsInfor {
  margin-left: 10px;
  margin-top: 20px;
}
.goods > .goodsInfor > .score {
  margin-top: 20px;
  font-size: 14px;
}
.goods > .goodsInfor > .gap {
  margin-top: 14px;
  font-size: 14px;
  display: flex;
}
.goods > .goodsInfor > .gap > span {
  display: inline-block;
}
.goods > .goodsInfor > .gap > span:nth-child(3) {
  margin-left: 48px;
  width: 80px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  background-color: coral;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
}
</style>